import { withI18n } from '@lingui/react'
import { Alert, Modal, Tag } from 'antd'
import PropTypes from 'prop-types'
import React, { PureComponent } from 'react'

// const { Meta } = Card

@withI18n()
class DeleteModal extends PureComponent {
  state = {
    targetproject: {},
  }
  handleOk = () => {
    const { selected, onCancel, devices, deleteresult, onDelete } = this.props
    if (deleteresult) {
      onCancel()
      return
    }
    let selects = []
    for (var index = 0; index < selected.length; index++) {
      selects.push(devices[selected[index]])
    }
    onDelete(selects)
  }

  render() {
    const {
      selected,
      devices,
      deleteresult,
      deleteloading,
      onDelete,
      i18n,
      ...modalProps
    } = this.props
    let count = deleteresult ? deleteresult.successed : 0
    let imeis = ','
    if (selected && selected.length > 0) {
      for (var index = 0; index < selected.length; index++) {
        let targ = devices[selected[index]]
        if (targ) {
          imeis += targ.Imei + ','
        }
      }
    }
    imeis = imeis.slice(1, imeis.length - 1)
    return (
      <Modal
        {...modalProps}
        closable={true}
        keyboard={false}
        confirmLoading={deleteloading}
        okText={deleteresult ? i18n.t`Close` : i18n.t`Confirm`}
        onOk={this.handleOk}
      >
        <Alert
          showIcon
          style={{ marginBottom: '10px' }}
          type="warning"
          message={`${i18n.t`Warning`}:`}
          description={i18n.t`All Imei ${imeis} user devices will be deleted, please operate with caution!`}
        />
        {deleteresult ? (
          <Alert
            style={{ marginBottom: '10px', background: '#fff' }}
            message={i18n.t`Result`}
            description={
              <div>
                {count > 0 && (
                  <Alert
                    style={{ marginTop: '5px' }}
                    message={i18n.t`The system has applied to delete these ${count} devices, please refresh the page later to see the results!`}
                  />
                )}
                {deleteresult.errors.length > 0 &&
                  deleteresult.errors.map(item => {
                    return (
                      <Alert
                        style={{ marginTop: '5px' }}
                        type="warning"
                        showIcon
                        message={
                          i18n.t`Device` +
                          ` ${item.DeviceName} ` +
                          i18n.t`Delete failed!`
                        }
                        description={item.reason}
                      />
                    )
                  })}
              </div>
            }
          />
        ) : (
          <Alert
            style={{ marginBottom: '10px', background: '#fff' }}
            message={`${i18n.t`Choosed Devices`}:`}
            description={selected.map(index => {
              const item = devices[index]
              return (
                <Tag color="cyan" style={{ marginTop: '10px' }}>
                  {item.DeviceName}
                </Tag>
              )
            })}
          />
        )}
      </Modal>
    )
  }
}

DeleteModal.propTypes = {
  type: PropTypes.string,
  item: PropTypes.object,
  onOk: PropTypes.func,
}

export default DeleteModal
